<template>
  <div class="area_simulation" @click="closeSelect">
    <div class="area_simulation_content" @click.stop="resetModal">
      <div class="radio_title">选择付款方式</div>
      <div id="warp">
      <mt-radio
        align="right"
        v-model="renovationValue"
        :options="paymentMethodList">
      </mt-radio>
      </div>
      <!--<div>{{areaValue}}</div>-->
    </div>

  </div>
</template>

<script>
  import  Vue from 'vue';
  import { Radio } from 'mint-ui';
  import BScroll from 'better-scroll';
  Vue.component(Radio.name, Radio);
  export default {
    props:{
      closeSelect:{
        type:Function
      },
      paymentMethodList:{
        type: Array
      }
    },
    name: 'PaymentMethod',
    data(){
      return{
      }
    },
    mounted() {
      let that = this;
      that.$nextTick(() => {
        new BScroll('#warp', {
          click: true
        })
      })
    },
    computed:{
      renovationValue:{
        get(){
          return this.$store.getters.getPaymentRadio;
        },
        set(val){
          let newValue = val.toString();
          this.$store.commit('setPaymentRadio',newValue);
          this.closeSelect();
        }
      },
    },
    watch:{
      // renovationValue(val){
      //   console.log(val);
      //   let newValue = val.toString();
      //   this.$store.commit('setRenovationRadio',newValue);
      // }
    },
    methods:{
      resetModal(){

      },
      // testOne(){
      //   console.log(this.areaValue)
      // }
    }
  }
</script>

<style scoped>


</style>
